<!-- 购物车 -->
<template>
  <div class="content" v-loading="loading">
    <web-header></web-header>
    <div v-if="cartList.length">
      <div v-for="i in cartList" :key="i.id" class="borderBottom">
        <div class="box">
          <div class="boxLeft" style="flex:0 0 50px;" @click="selectShop(i)">
            <i class="el-icon-success iconSize" :class="i.select?'iconSelected':'iconSelect'"></i>
          </div>
          <div class="boxLeft">
            <img v-if="i.picUrl" :src="i.picUrl" width="120" height="120" alt="">
            <img v-else src="@/assets/images/1481161992.jpg" width="120" height="120" alt="">
          </div>
          <div class="boxRight">
            <div>
              <p class="orderTitle" style="flex: 0 0 400px;">{{i.categoryName}}</p>
              <p class="orderDel tar" @click="cartDel(i.id)">{{$t('lan.del1')}}</p>
            </div>
            <div>
              <p><span class="gray">{{$t('lan.cabinet')}}：</span>{{i.subCategoryTotalCount}}</p>
              <p><span class="gray">{{$t('lan.numberDoors')}}：</span>{{i.doorTotalCount}}</p>
              <p class="font-w" style="color:#EA5420">$：{{i.amt}}</p>
            </div>
            <div>
              <p><span class="gray">{{$t('lan.doorColor')}}：<span>{{i.colorValue?i.colorValue:''}}</span><span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span></span> </p>
              <p><span class="gray">{{$t('lan.cabinetColor')}}：</span><span>{{i.cabinetColorValue?i.cabinetColorValue:''}}</span><span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span></p>
              <p><span class="gray">{{$t('lan.system')}}：</span>{{i.operationCode}}</p>
            </div>
            <div>
              <p>{{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="totalAmt">
        <el-row>
          <el-col :span="18">
            <div>{{$t('lan.total')}}</div>
          </el-col>
          <el-col :span="6">
            <span class="font-w" style="color:#EA5420">$ {{totamAmt?totamAmt:'0.00'}}</span>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="6" :offset="9">
          <el-button @click="invoicing" :style="{'background':'#ee781e','color':'#fff','width':'100%','height':'60px',borderRadius:'0px',fontSize:'20px'}" :disabled="!isSave">{{$t('lan.check')}}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getCatList, delCart, cartComfirm } from '../api'
import { colorList } from '../common'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      cartList: [],
      loading: false,
    }
  },
  computed: {
    // 总金额
    totamAmt () {
      let amount = null
      for (let i of this.cartList) {
        if (i.select) {
          amount += i.amt
        }
      }
      return amount
    },
    isSave () {
      let isSave = false
      const cartList = this.cartList.filter((item) => item.select)
      const cart = Array.from(cartList, ({ select }) => select)
      if (cart.includes(true)) return isSave = true
    }
  },
  methods: {
    addNum (data, val, type) {
      val.count = +val.count
      var totalCount = null
      for (let j of data.subCategoryMapList) {
        j.count = Number(j.count)
        totalCount += j.count
      }
      if (type === 'add') {
        if (totalCount >= 8) {
          return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.most') })
        }
      }
      if (type === 'sub') {
        if (val.count === 0) return
        val.count -= 1
        data.subCategoryTotalCount = totalCount - 1
      } else {
        val.count += 1
        data.subCategoryTotalCount = totalCount + 1
      }
    },
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    // 删除购物车列表
    cartDel (id) {
      this.$confirm(this.$t('lan.productPrompt'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        await delCart(id)
        Notification({ title: this.$t('lan.success'), type: 'success', message: this.$t('lan.del') })
        this.fetchCatList()
      });
    },
    async fetchCatList () {
      try {
        this.loading = true
        const data = await getCatList({ userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : '' })
        for (let i of data.datas) {
          i.select = true
        }
        localStorage.setItem('cartList', JSON.stringify(data.datas))
        this.cartList = data.datas
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    invoicing () {
      const cartList = this.cartList.filter((item) => item.select)
      const id = Array.from(cartList, ({ id }) => id)
      localStorage.setItem('shopId', JSON.stringify(id))
      this.$router.push('/orderConfirmation')
    },
    selectShop (item) {
      item.select = !item.select
    }
  },
  mounted () {
    this.fetchCatList();
  },
}
</script>
<style scoped>
.content {
  width: 1200px;
  margin: 20px auto;
}
.content >>> .is-disabled {
  color: #fff !important;
  background-color: #909399 !important;
  border-color: #909399 !important;
}
.borderBottom {
  overflow: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.box {
  display: flex;
  align-items: center;
}
.boxLeft {
  cursor: pointer;
  flex: 0 0 140px;
}
.boxRight {
  color: #2c2c2c;
  flex: 1;
}
.boxRight div {
  display: flex;
  padding-bottom: 15px;
}
.boxRight div p {
  flex: 1;
  font-size: 14px;
}
.boxRight div p:nth-of-type(1) {
}
.mainSystemContent {
  width: 80%;
  float: right;
}
.categoryText {
  padding: 0px 25px;
  font-size: 18px;
  font-weight: bold;
  float: left;
  height: 40px;
  line-height: 40px;
  min-width: 40px;
}
.inputNumber {
  position: relative;
  display: inline-block;
  width: 160px;
  border: 1px solid #e5e5e5;
  line-height: 38px;
}
.inputDearcase {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dcdfe6;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}
.mainNum {
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
}
.inputIncrease {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}
.totalAmt {
  margin: 30px 0px;
  height: 45px;
  line-height: 45px;
}
.totalAmt > div {
  font-size: 20px;
}
.totalAmt span {
  color: #f53434;
  margin: 0px 10px;
}
.iconSelect {
  color: #bbb;
}
.iconSelected {
  color: #ee781e !important;
}
.iconSize {
  font-size: 28px;
}
</style>